﻿@page
@model FytSoa.Web.Pages.FytAdmin.Cms.SiteModel
@{
    ViewData["Title"] = "站点管理";
    Layout = AdminLayout.Pjax(HttpContext);
}

<div id="container">
    <style>
        .layui-field-title i {
            margin-right: 5px;
            font-size: 25px;
            position: relative;
            top: 2px;
        }

        .layui-form-item {
            width: 60%;
        }
        .layui-col-220 {
            width: 280px;
        }

        .right-col-body {
            left: 280px;
        }
        .site-list ul li {
            cursor: pointer;
            padding: 15px 0 15px 35px;
            position: relative;
            border-bottom: 1px solid #e6e6e6;
            color: #76838f;
        }
            .site-list ul li .tool {
                display: none;
                position: absolute;
                right: 10px;
                top: 9px;
                z-index: 1000;
            }
                .site-list ul li .tool a {
                    display: inline-block;
                    padding: 5px 10px;
                    font-size: 20px;
                    margin-left: 10px;
                    color: #96a5aa;
                }
            .site-list ul li:hover, .site-list ul li.active {
                background-color: #f3f8ff;
            }
            .site-list ul li:hover .tool{
                display:block;
            }
    </style>
    <div id="app">
        <div class="layui-col-220 site-list">
            <div class="layui-nav-title"><span>站点列表</span><button @@click="addSite" class="layui-btn layui-btn-sm"><i class="layui-icon"></i>添加站点</button></div>
            <ul>
                <li v-cloak @@click.stop="selSite(it)" v-for="it in list" :class="it.siteName==m.siteName?'active':''">{{it.siteName}}<span class="tool"><a title="编辑" @@click.stop="selSite(it)" class="layui-icon layui-icon-edit"></a><a title="删除" @@click.stop="delSite(it)" class="layui-icon layui-icon-delete"></a></span></li>
            </ul>
        </div>
        <div class="right-col-body">
            <form class="layui-form form-cus" action="" style="padding:5px 15px;">
                <div class="layui-tab" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">站点基本信息</li>
                        <li>公司信息</li>
                        <li>第三方</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <label class="layui-form-label">站点名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteName" v-model="m.siteName" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入站点名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">站点域名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteUrl" v-model="m.siteUrl" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入站点域名" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">站点Logo</label>
                                <div class="layui-input-block fyt-upfile">
                                    <input type="text" id="SiteLogo" name="SiteLogo" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入站点域名" class="layui-input">
                                    <button type="button" class="layui-btn fyt-cloud" data-text="SiteLogo" data-type="sign">选择文件</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">版权/其他</label>
                                <div class="layui-input-block">
                                    <textarea name="SiteCopyright" v-model="m.siteCopyright" class="layui-textarea" style="min-height: 60px;" placeholder="版权信息或者备案号信息，支持Html"></textarea>
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend><i class="layui-icon layui-icon-component"></i>SEO</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <label class="layui-form-label">页面标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SeoTitle" v-model="m.seoTitle" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入页面标题" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">页面关键</label>
                                <div class="layui-input-block">
                                    <textarea name="SeoKey" v-model="m.seoKey" class="layui-textarea" style="min-height: 60px;" placeholder="请输入页面关键，最多100个字符，关键字以逗号分隔"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">页面描述</label>
                                <div class="layui-input-block">
                                    <textarea name="SeoDescribe" v-model="m.seoDescribe" class="layui-textarea" style="min-height: 60px;" placeholder="请输入300字以内的网站描述"></textarea>
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                <legend><i class="layui-icon layui-icon-face-cry"></i>关闭网站</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否关闭</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="Status" lay-skin="switch" lay-text="是|否">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">关闭原因</label>
                                <div class="layui-input-block">
                                    <textarea name="CloseInfo" v-model="m.closeInfo" class="layui-textarea" style="min-height: 60px;" placeholder="请输入关闭原因"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <label class="layui-form-label">公司电话</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteTel" v-model="m.siteTel" autocomplete="off" placeholder="（选填）公司电话" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">公司传真</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteFax" v-model="m.siteFax" autocomplete="off" placeholder="（选填）公司传真" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">联系邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteEmail" v-model="m.siteEmail" autocomplete="off" placeholder="（选填）联系邮箱" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">联系地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="SiteAddress" v-model="m.siteAddress" autocomplete="off" placeholder="（选填）联系地址" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">客服QQ</label>
                                <div class="layui-input-block">
                                    <input type="text" name="QQ" v-model="m.qq" autocomplete="off" placeholder="（选填）客服QQ" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">其他信息</label>
                                <div class="layui-input-block">
                                    <textarea name="SiteCode" v-model="m.siteCode" class="layui-textarea" style="min-height: 60px;" placeholder="（选填）支持Html"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <label class="layui-form-label">微信二维码</label>
                                <div class="layui-input-block fyt-upfile">
                                    <input type="text" id="WeiXin" name="WeiXin" autocomplete="off" placeholder="（选填）微信二维码" class="layui-input">
                                    <button type="button" class="layui-btn fyt-cloud" data-text="WeiXin" data-type="sign">选择文件</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">微博二维码</label>
                                <div class="layui-input-block fyt-upfile">
                                    <input type="text" id="WeiBo" name="WeiBo" autocomplete="off" placeholder="（选填）微博二维码/连接" class="layui-input">
                                    <button type="button" class="layui-btn fyt-cloud" data-text="WeiBo" data-type="sign">选择文件</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="submit">　　保　存　　</button>
                    </div>
                </div>
                <input type="hidden" name="Guid" v-model="m.guid" /><input type="hidden" name="AddTime" v-model="m.addTime" />
            </form>
        </div>
    </div>
    <script>
        var os,$,fun,form,vm = new Vue({
            el: '#app',
            data: {
                list: [],
                m: {}
            },
            methods: {
                selSite: function (m) {
                    this.m = m;
                    $('#SiteLogo').val(m.siteLogo);
                    $('#WeiBo').val(m.weiBo);
                    $('#WeiXin').val(m.weiXin);
                    if (m.status) {
                        $('input:checkbox').prop("checked",true);
                    }
                    else{
                        $('input:checkbox').prop("checked", false);
                    }
                    form.render('checkbox');
                },
                delSite: function (m) {
                    var that = this;
                    if (this.list.length === 1) {
                        os.warning('站点必须保留一个！~');
                        return;
                    }
                    layer.confirm('确定要删除该站点吗？', function (index) {
                        layer.close(index);
                        os.ajax('api/cmssite/del/', { parm: m.guid }, function (res) {
                            if (res.statusCode === 200) {
                                that.clearSite();
                                fun.init();
                                os.success('删除成功！');
                            } else {
                                os.error(res.message);
                            }
                        });
                    });
                },
                addSite: function () {
                    this.clearSite();
                },
                clearSite: function () {
                    this.m = {};
                    $('#SiteLogo').val('');
                    $('#WeiBo').val('');
                    $('#WeiXin').val('');
                }
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'form'], function () {
            form = layui.form;os = layui.common; $ = layui.$;
            os.cloudFile();

            fun = {
                init: function () {
                    os.ajax('api/cmssite/list', {}, function (res) {
                        if (res.statusCode === 200) {
                            console.log(res.data);
                            vm.list = res.data;
                        } else {
                            os.error(res.message);
                        }
                    });
                }
            }
            fun.init();
            //监听提交
            form.on('submit(submit)', function (data) {
                var urls = "api/cmssite/savesite";                
                
                vm.m.status = data.field.Status === 'on' ? true : false;
                vm.m.siteLogo = $('#SiteLogo').val();
                vm.m.weiBo = $('#WeiBo').val();
                vm.m.weiXin = $('#WeiXin').val();
                os.ajax(urls, vm.m, function (res) {
                    if (res.statusCode == 200) {
                        fun.init();
                        os.success('保存成功~');
                    }
                    else {
                        os.error(res.message);
                    }
                });
                return false;
            });
        });
    </script>
</div>
